<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>馨客栈 | 网页版演示库</title>
    <meta name="keywords" content="馨客栈情报局,Mackxin,馨客栈前端导航,馨客栈,馨客栈导航,馨客栈分享,xininn,xinkezhan,馨客栈福利"> <!-- 关键字搜索 -->
    <meta name="description" content="关注分享，关注导航，关注馨客栈"> <!-- 写自己网站的简介 -->
    <meta name="author" content="Mackxin,mackxin@aliyun.com"> <!-- 作者简介 -->
    <link rel="shortcut icon" href="../img/mackxin.ico" /><!-- 网页标题图标引导文件 -->
    <link rel="stylesheet" type="text/css" href="../css/content.css">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134696099-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'UA-134696099-1');
    </script>
    <!-- Google Tag Manager -->
    <script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            }); var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-5VS93LG');
    </script>
    <!-- End Google Tag Manager -->
    <!-- 统计代码开始 -->
    <script type="text/javascript">
        (function (w, d, s, a, m) {
            (w._caq = w._caq || []).push(["_requestTimeCA", (new Date).getTime()]);
            a = d.createElement(s),
                a.async = 1;
            a.src = "//cn.centcount.com/ca.php?siteid=1805250000001001&r=" + Math.random();
            m = d.getElementsByTagName(s)[0];
            m.parentNode.insertBefore(a, m)
        })(window, document, "script");
    </script>
    <!-- 统计代码结束 -->
    <!-- mackxin.com Baidu tongji analytics start -->
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?081868522efe89988d1cfca88204be9b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!-- mackxin.com Baidu tongji analytics end -->
</head>

<body>
    <header>
        <h1>馨客栈教程</h1>
        <h2>关注分享，关注导航，关注馨客栈</h2>
    </header>
    <nav id="nav">
        <ul>
            <li><a href="http://mackxin.com/nav.html" target="_blank">馨客栈导航</a></li>
            <li><a href="http://mackxin.com/qingbaoju.html" target="_blank">馨客栈情报局</a></li>
            <li><a href="http://mackxin.com/fx.html" target="_blank">馨客栈分享</a></li>
            <li><a href="https://xininn.github.io/" target="_blank">馨客栈博客</a></li>
        </ul>
    </nav>
    <article>
        <h2>「馨客栈分享」网页版演示库nodePPT</h2>

        <p class="timeLeft">文章最后更新时间： 2019-10-23</p>

        <section>

            <h2>1.nodePPT介绍和安装</h2>

            <div>
                <p>官网：<a target="_blank" href="https://nodeppt.js.org">nodePPT</a></p>
                <p>开源地址：<a target="_blank" href="https://github.com/ksky521/nodeppt">nodePPT</a></p>
            </div>

            <div class="xyin">
                <p>这可能是迄今为止最好的网页版演示库</p>
                <p>最佳体验是 chrome 浏览器，本来就是给做演示用的</p>
                <p>下面是全局安装的命令</p>
                <p><code>npm install -g nodeppt</code></p>
            </div>

        </section>

        <section>

            <h2>2.nodePPT的一些命令</h2>

            <div>
                <p>nodePPT命令很少，简单看看下面的介绍哈</p>
            </div>

            <div class="xyin">
                <p>创建一个新的 md 文件：<code>nodeppt new xin.md</code></p>
                <p>启动一个 md 文件的 webpack dev server：<code>nodeppt serve xin.md</code></p>
                <p>编译产出一个 md 文件(生成静态文件)：<code>nodeppt build xin.md</code></p>
                <p>help：<code>nodeppt -h</code></p>
                <p>获取帮助：<code>nodeppt serve -h</code></p>
            </div>

        </section>

        <section>

            <h2>3.键盘快捷键</h2>

            <div>
                <p>介绍一下快捷键的一些使用方法哈</p>
            </div>

            <div class="xyin">
                <p>页面切换：↑/↓/←/→ 空格 Home End</p>
                <p>全屏观看：F</p>
                <p>放大缩小（总览）：-/+</p>
                <p>演讲笔记：N</p>
                <p>网格背景：Enter</p>
            </div>

        </section>

        <section>

            <h2>4.基本语法</h2>

            <div>
                <p>整个 markdown 文件分为两部分</p>
                <p>第一部分是写在最前面的配置</p>
                <p>第二部分是使用<slide>隔开的每页幻灯片内容</p>
            </div>

            <pre><code>
                title: nodeppt markdown 演示
                speaker: 馨客栈
                url: https://github.com/mackxin
                js:
                - https://www.echartsjs.com/asset/theme/shine.js
                prismTheme: solarizedlight
                plugins:
                - echarts
                - mermaid
                - katex
            </code></pre>


            <div class="xyin">
                <p>title: 这是演讲的题目</p>
                <p>speaker: 演讲者名字</p>
            </div>

        </section>

        <section>

            <h2>5.&lt;slide&gt;语法</h2>

            <div>
                <p>nodeppt 会根据 &lt;slide&gt; 对整个 markdown 文件进行拆分，拆成单页的幻灯片内容</p>
            </div>

            <div class="xyin">
                <p>class/style 等：正常的 class 类，可以通过这个控制居中（aligncenter），内容位置，背景色等</p>
                <p>image：背景图片，基本语法 image="img_url"</p>
                <p>video：背景视频，基本语法 video="video_src1,video_src2"</p>
                <p>:class：wrap 的 class，下面详解</p>
            </div>

            <div class="xyin">
                <p>每个 slide 会解析成下面的 html 结构：</p>
                <xmp>
                    <section class="slide" attrs...>
                        <div class="wrap" wrap="true">// 具体 markdown 渲染的内容</div>
                    </section>
                </xmp>
                <p>其中&lt;slide&gt; 的class等会被解析到 &lt;section&gt;标签上面，而:class则被解析到div.wrap上面，例如：</p>
                <xmp>
                    <slide :class="size-50" class="bg-primary"></slide>
                </xmp>
                <p>output 为：</p>
                <xmp>
                    <section class="slide bg-primary">
                        <div class="wrap size-50" wrap="true">// 具体 markdown 渲染的内容</div>
                    </section>
                </xmp>
            </div>

            <div>
                <p>背景&图片</p>
                <p>背景演示地址：<a target="_blank" href="https://js8.in/nodeppt/background.html">在线演示background</a> </p>
                <p>背景仓库地址：<a target="_blank" href="https://github.com/ksky521/nodeppt/blob/master/site/background.md">在线仓库background</a></p>
                <hr>
                <p>样式</p>
                <p>样式演示地址：<a target="_blank" href="https://js8.in/nodeppt/classes.html">在线演示classes</a> </p>
                <p>样式仓库地址：<a target="_blank" href="https://github.com/ksky521/nodeppt/blob/master/site/classes.md">在线仓库classes</a></p>
                <hr>
                <p>布局</p>
                <p>布局演示地址：<a target="_blank" href="https://js8.in/nodeppt/layout.html">在线演示layout</a> </p>
                <p>布局仓库地址：<a target="_blank" href="https://github.com/ksky521/nodeppt/blob/master/site/layout.md">在线仓库layout</a></p>
            </div>

            <div class="xyin">
                <p>&lt;slide&gt;的image 会被解析成背景大图，常见的支持方式有：</p>
                <xmp>
                    这是一个普通的背景图
                    <slide image="https://source.unsplash.com/UJbHNoVPZW0/"></slide>
                </xmp>
                <xmp>
                    这张背景图会在图片上面蒙一层偏黑色的透明层
                    <slide image="https://source.unsplash.com/UJbHNoVPZW0/ .dark"></slide>
                </xmp>
                <xmp>
                    这张背景图会在图片上面蒙一层偏白色的透明层
                    <slide image="https://source.unsplash.com/UJbHNoVPZW0/ .light"></slide>
                </xmp>
                <xmp>
                    这张背景图会缓慢动
                    <slide class="bg-black aligncenter" image="https://source.unsplash.com/n9WPPWiPPJw/ .anim">
                </xmp>
            </div>


        </section>

        <br><br><br><br><br>
    </article>

    <footer>
        <p>关注分享，关注导航，关注馨客栈</p>
        <p>@2015-2019 Mackxin</p>
    </footer>

    <script>
        var nav = document.getElementById('nav');
        var navTop = nav.offsetTop;
        window.onscroll = function () {
            var xTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (xTop > navTop) {
                nav.classList.add('xfixed');
            } else {
                nav.classList.remove('xfixed');
            }
        }
    </script>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5VS93LG" height="0" width="0"
            style="display:none;visibility:hidden"></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->
    <!-- 51.la网站统计代码开始 -->
    <script type="text/javascript" src="//js.users.51.la/20270405.js"></script>
    <!-- 51.la网站统计代码结束 -->
</body>

</html>